<template>
  <div class="edit">
    <div class="edit-header">{{ $t('common.editView.headerText') }}</div>
    <t-radio-group class="edit-tabs" variant="default-filled" size="large" v-model="state.activeTab"
      @change="action.onChangeTab">
      <t-radio-button :value="EDIT_TABS.TEXT">文本合成</t-radio-button>
      <t-radio-button :value="EDIT_TABS.AUDIO">音频合成</t-radio-button>
    </t-radio-group>
    <div class="edit-body edit-body-text" v-show="getter.isTextTab.value">
      <EditText v-model="select" class="content" :listener="listener" />
    </div>
    <div class="edit-body" v-show="getter.isAudioTab.value">
      <EditUpload v-model="select" class="content" :listener="listener" />
    </div>
    <EditListener ref="listener" />
  </div>
</template>
<script setup>
import { computed, reactive, ref } from 'vue'
import EditListener from './EditListener.vue'
import EditUpload from './EditUpload.vue';
import EditText from './EditText.vue';

const select = defineModel({})


const EDIT_TABS = {
  TEXT: '1',
  AUDIO: '2'
}

const state = reactive({
  activeTab: EDIT_TABS.TEXT,
  textToAudioLoading: false,
})

const listener = ref()

const getter = {
  isTextTab: computed(() => {
    return state.activeTab === EDIT_TABS.TEXT
  }),
  isAudioTab: computed(() => {
    return state.activeTab === EDIT_TABS.AUDIO
  })
}

const action = {
  onChangeTab() {
    listener.value?.pause()
  }
}

</script>
<style lang="less" scoped>
.edit {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #ffffff;  // 添加白色背景

  &-header {
    font-weight: 500;
    padding: 18px;
    font-size: 14px;
    color: #333333;  // 白色文字改为深灰色
    line-height: 22px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色
    background-color: #fafafa;  // 添加浅灰白色背景，区分头部
  }

  &-tabs {
    margin: 12px 20px 0;
    display: flex;
    width: auto;
    padding: 6px;
    border-radius: 4px;
    background-color: #f5f5f5;  // 深色背景改为浅灰色
    --td-bg-color-container-select: #e6f0ff;  // 选中背景改为淡蓝色
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感

    :deep(.t-radio-button) {
      width: 50%;
      border-radius: 4px;
      transition: all 0.2s ease;  // 添加过渡效果

      &:hover:not(.t-is-checked) {
        background-color: #f0f0f0;  // 添加悬停效果
      }
    }

    :deep(.t-radio-button__label) {
      margin: auto;
      font-weight: 400;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      line-height: 20px;
    }

    :deep(.t-is-checked) {
      .t-radio-button__label {
        font-weight: 400;
        color: #0052d9;  // 选中时文字变为品牌蓝色
      }

      background-color: #ffffff;  // 选中项背景为白色
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);  // 添加阴影增强立体感
    }
  }

  &-body {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: start;
    position: relative;
    background-color: #ffffff;  // 确保主体区域为白色

    .content {
      border-radius: 8px;
      width: 100%;
      --td-bg-color-specialcomponent: #ffffff;  // 深色背景改为白色
      --td-brand-color-focus: #f5f5f5;  // 聚焦时的背景色改为浅灰色
      border: 1px solid #e0e0e0;  // 添加边框增强视觉定义
      transition: border-color 0.2s ease;  // 添加过渡效果

      &:hover, &:focus-within {
        border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
      }
    }

    &-text {
      padding-bottom: 91px;

      .content {
        background-color: #ffffff;  // 深色背景改为白色
      }

      :deep(.t-textarea) {
        background-color: #ffffff;
        color: #333333;

        textarea {
          color: #333333;  // 确保文本区域中的文字为深灰色

          &::placeholder {
            color: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色
          }
        }
      }
    }
  }
}

/* 针对输入区域的额外优化 */
:deep(.t-input), :deep(.t-textarea) {
  --td-bg-color-specialcomponent: #ffffff;  // 深色背景改为白色
  --td-text-color-primary: #333333;  // 白色文字改为深灰色
  --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

  .t-input__inner, textarea {
    background-color: #ffffff;
    border-color: #e0e0e0;
    color: #333333;

    &:hover, &:focus {
      border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
    }
  }

  &:focus-within {
    box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加聚焦时的轻微蓝色阴影
  }
}
</style>
